<template>
    <view class="page__bd">
        <form>
            <view class="hb-bar bg-white solid-bottom_gray margin-top">
                <view class="action"><text class="hb-icon_qr_code text-blue"></text>基础信息</view>
            </view>
            <view class="form-group">
                <view class="title">姓名</view>
                <input placeholder="请输入姓名" name="input"></input>
            </view>
			<view class="form-group">
			    <view class="title">姓名</view>
			    <view class="value">非表单控件</view>
			</view>
            <view class="form-group">
                <view class="title required">必填</view>
                <input placeholder="请输入必填值" name="input"></input>
            </view>
            <view class="hb-bar bg-white solid-bottom_gray margin-top">
                <view class="action">其他信息</view>
            </view>
            <view class="form-group">
                <view class="title">地址</view>
                <input placeholder="请输入地址" name="input"></input>
                <text class='hb-icon_locationfill text-green'></text>
            </view>
            <view class="form-group">
                <view class="title required">验证码</view>
                <input placeholder="请输入验证码" name="input"></input>
                <button class='hb-btn hb-btn_success shadow'>验证码</button>
            </view>
            <view class="form-group">
                <view class="title required">手机号</view>
                <input type="number" maxlength="11" placeholder="请输入手机号" />
                <view class="hb-capsule radius">
                    <view class="hb-tag bg-blue">
                        +86
                    </view>
                    <view class="hb-tag line-blue">中国大陆</view>
                </view>
            </view>
            <view class="hb-bar bg-white solid-bottom_gray margin-top">
                <view class="action"><text class="hb-icon_qr_code text-blue"></text>其他信息</view>
            </view>
            <view class="form-group">
                <view class="title">日期</view>
                <picker mode="date" class="picker" :value="date" start="2015-09-01" end="2020-09-01" @change="dateChange">
                    <view class="picker-title">
                        {{date}}
                    </view>
                </picker>
            </view>
            <view class="form-group">
                <view class="title required">经营时间</view>
                <picker mode="time" :value="startTime" start="00:01" end="23:59" @change="onStartTimeChange">
                    <view class="text-center">
                        {{startTime}}
                    </view>
                </picker>
                <text class=''>至</text>
                <picker mode="time" :value="endTime" start="00:01" end="23:59" @change="onEndTimeChange">
                    <view class="text-center">
                        {{endTime}}
                    </view>
                </picker>
            </view>
            <!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
            <view class="form-group">
                <view class="title">地址选择</view>
                <picker mode="region" class="picker" @change="onRegionChange" :value="region">
                    <view class="picker-title">
                        {{region[0]}}，{{region[1]}}，{{region[2]}}
                    </view>
                </picker>
            </view>
            <!-- #endif -->
            <view class="form-group">
                <view class="title">单选</view>
                <radio-group>
                    <radio class="radio" value="1">男</radio>
                    <radio class="radio" vlaue="2">女</radio>
                </radio-group>
            </view>
            <view class="form-group">
                <view class="title">单选</view>
                <checkbox-group>
                    <checkbox class="checkbox" value="1">瀚</checkbox>
                    <checkbox class="checkbox" vlaue="2">邦</checkbox>
                </checkbox-group>
            </view>
            <view class="form-group">
                <view class="title">开关</view>
                <switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
            </view>
            <view class="form-group">
                <view class="title">头像</view>
                <view class="hb-avatar radius" style="background-image: url(https://img.18183.com/uploads/allimg/181229/237-1Q2291H404N0.jpg);"></view>
            </view>
            <view class="hb-bar bg-white margin-top">
                <view class="action">图片上传</view>
                <view class="action">{{imgList.length}}/5</view>
            </view>
            <view class="form-group">
                <view class="grid col-4 grid-square flex-sub">
                    <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="onViewImg" :data-url="imgList[index]">
                        <image :src="imgList[index]" mode="aspectFill"></image>
                        <view class="hb-tag bg-red" @tap.stop="onDelImg" :data-index="index">
                            <text class='hb-icon_close'></text>
                        </view>
                    </view>
                    <view class="solids" @tap="onChooseImage" v-if="imgList.length<5">
                        <text class='hb-icon_cameraadd'></text>
                    </view>
                </view>
            </view>
            <view class="hb-bar bg-white solid-bottom_gray margin-top">
                <view class="action"><text class="hb-icon_title text-blue"></text>多行文本框</view>
            </view>
            <view class="form-group align-start">
                <view class="title">文本框</view>
                <textarea placeholder="多行文本输入框" maxlength="500"></textarea>
            </view>
            <view class="form-group align-start">
                <view class="title">文本框</view>
                <view class="body">
                    <textarea placeholder="多行文本输入框" maxlength="500" v-model="textarea"></textarea>
                    <view class="word-limit">
                        {{textarea.length}}/500
                    </view>
                </view>
            </view>
            <view class="form-group">
                <textarea maxlength="-1" placeholder="多行文本输入框"></textarea>
            </view>
            <view class="form-group">
                <view class="body">
                    <textarea maxlength="500" v-model="tempTextarea" placeholder="多行文本输入框"></textarea>
                    <view class="word-limit">
                        {{tempTextarea.length}}/500
                    </view>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                startTime: '开始',
                endTime: '结束',
                date: '请选择日期',
                region: ['福建省', '福州市', '鼓楼区'],
                imgList: [],
                textarea: '',
                tempTextarea: '',
                switchA: false,
            }
        },
        methods: {
            //营业开始时间
            onStartTimeChange(e) {
                this.startTime = e.detail.value
            },
            //营业结束时间
            onEndTimeChange(e) {
                this.endTime = e.detail.value;
            },
            //选择日期
            dateChange(e) {
                this.date = e.detail.value
            },
            //选择地址
            onRegionChange(e) {
                this.region = e.detail.value
            },
            //删除图片
            onDelImg(e) {
                uni.showModal({
                    title: "提示",
                    content: "确定要删除这张照片吗？",
                    cancelText: "取消",
                    confirmText: "确定",
                    success: (res) => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1)
                        }
                    }
                })
            },
            //选择图片
            onChooseImage(e) {
                let that = this;
                uni.chooseImage({
                    count: 5, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res) => {
                        if (that.imgList.length != 0) {
                            that.imgList = that.imgList.concat(res.tempFilePaths)
                        } else {
                            that.imgList = res.tempFilePaths
                        }
                    }
                })
            },
            //预览图片
            onViewImg(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                })
            },
            SwitchA(e) {
                this.switchA = e.detail.value
            },
        }
    }
</script>

<style>
</style>
